/*
 * @Author: hanyu
 * @Date: 2018-05-07 09:46:58 
 * @Last Modified by: hy
 * @Last Modified time: 2018-08-23 09:27:58
 */
<template>
    <div id="dashboard" style="min-height:200px;height:220px;width:300px">
    </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    value: {
      type: Number,
      default: () => {
        return 0;
      }
    }
  },
  data() {
    return {
      myChart: null,
      dataOption: {}
    };
  },
  watch: {
    value(res) {
      this.setOption(res);
    }
  },
  methods: {
    setOption(res) {
      var option = {
        backgroundColor: "transparent",
        series: [
          {
            max: 72,
            type: "gauge",
            center: ["40%", "60%"], // 默认全局居中
            radius: "70%",
            detail: {
              formatter: "{value}",
              fontFamily: "DIN Condensed Bold"
            },
            axisLine: {
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [[0.33, "#2BE951"], [0.66, "#1EC2FF"], [1, "#FFD81A"]]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: -15
            },
            pointer: {
              width: 3
            },
            title: {
              show: true,
              offsetCenter: [0, "100%"], // x, y，单位px
              textStyle: {
                color: "#49dbff",
                fontSize: 15
              }
            },
            data: [
              {
                // name: "同城业务收送时效为" + this.value + "小时",
                name: "平均收发时效",
                value: Number(this.value)
              }
            ]
          }
        ]
      };
      self.myChart = echarts.init(document.getElementById("dashboard"), null, {
        devicePixelRatio: 2
      });
      self.myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.noData {
  color: white;
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}
</style>